<template>
    <div>
        <!--面包屑-->
        <el-breadcrumb separator="/" style="padding: 10px 10px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">产品功能</a></el-breadcrumb-item>
            <el-breadcrumb-item>产品列表管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="toptype" style="margin-top: 20px">
            <!--下拉菜单caketype-->
            <span class="typename">蛋糕种类</span>
            <el-dropdown trigger="click" @command="handleCommandtype">
                <el-button type="primary">
                    {{caketypelist[caketypeid].name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item,i) in caketypelist" :command="i" :key="item.caketypeid">{{item.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <!--下拉菜单cakeflavor-->
            <span class="typename">蛋糕口味</span>
            <el-dropdown trigger="click" @command="handleCommandflavor">
                <el-button type="primary">
                    {{cakeflavorlist[cakeflavorid].name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item,i) in cakeflavorlist" :command="i" :key="item.cakeflavorid">
                        {{item.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>


        <!--表格头-->
        <el-table :data="tableData"
                  style="width: 100%;margin-top: 20px"
                  v-loading="tableloding"
                  :border="true">
            <el-table-column
                    prop="name"
                    align="center"
                    label="产品名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="产品价格"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="describe"
                    align="center"
                    label="描述">
            </el-table-column>

            <!--操作-->
            <el-table-column label="操作"
                             align="center">
                <!--操作里的两个按钮-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页插件-->
        <div style="display: flex;justify-content: space-between;margin-top: 10px;">
            <div style="display: flex;justify-content: space-between">
                <el-select v-model="form.region" placeholder="批量操作">
                    <el-option label="批量发货" value="shanghai"></el-option>
                    <el-option label="关闭订单" value="beijing"></el-option>
                    <el-option label="删除订单" value="beijing"></el-option>
                </el-select>
                <el-button>确认</el-button>
            </div>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>

        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import '../../mock/mock.js'
    import {Loading} from 'element-ui';

    export default {
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                caketypelist: [
                    {name: '全部', type: 0},
                    {name: '蛋糕', type: 1},
                    {name: '冰淇淋', type: 2},
                    {name: '咖啡', type: 3},
                    {name: '下午茶', type: 4},
                    {name: '常温蛋糕', type: 5},
                    {name: '设计师', type: 6},
                    {name: '礼品面包', type: 7}
                ],
                cakeflavorlist: [
                    {name: '全部', type: 0},
                    {name: '乳脂奶油', type: 1},
                    {name: '慕斯', type: 2},
                    {name: '乳酪', type: 3},
                    {name: '巧克力', type: 4},
                    {name: '坚果', type: 5},
                    {name: '水果', type: 6},
                    {name: '含酒咖啡', type: 7},
                    {name: '冰淇淋', type: 8}
                ],
                caketypeid: 0,
                cakeflavorid: 0,
                total: 0,
                page: 1,
                tableloding: true,
                form: {
                    region: ''
                }
            }

        },
        methods: {
            // 通过vuex获取数据
            ...mapActions(["gettablelist"]),
            handleDelete(index, row) {
                // 删除数据，删除之前确认是否删除
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.tableData.splice(index, 1)
                        this.getcontantlist()
                    })

            },
            handleEdit(index, row) {
                console.log(index, row)
            },
            handleCommandtype(command) {
                // 蛋糕类型id
                this.caketypeid = command
                // 或得到id后重新获取数据
                setTimeout(() => {
                    this.getcontantlist()

                }, 1000)
            },
            handleCommandflavor(command) {
                // 蛋糕品种id
                this.cakeflavorid = command
                // 或得到id后重新获取数据
                setTimeout(() => {
                    this.getcontantlist()

                }, 1000)
            },
            handleSizeChange(val) {
                this.getcontantlist()
            },
            handleCurrentChange(val) {
                // 获取当前页数，并且赋值给全局的页数
                this.page = val
                // 重新获取列表，并将页数发送过去重新切割列表
                this.getcontantlist()
            },
            // 获取列表数据
            getcontantlist() {
                this.gettablelist({
                    // 获取数据的时候将蛋糕类型和蛋糕品种带过去
                    caketypeid: this.caketypeid,
                    cakeflavorid: this.cakeflavorid,
                    // 将当前页数带过去切割数据
                    page: this.page
                }).then(data => {
                    this.tableData = []
                    this.tableloding = true

                    setTimeout(() => {
                        this.tableData = data.data.data
                        this.total = data.data.length
                        this.tableloding = false

                    }, 500)
                    // 获取到以后更改本地的数据
                    // 将后台给的数据长度给到分页插件
                })
            },

        },
        mounted() {
            this.getcontantlist()
        }
    }
</script>

<style scoped>
    .el-dropdown {
        vertical-align: top;
    }

    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }


    .typename {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        color: #909399;
    }

    .toptype {
        display: flex;

    }
</style>